﻿@{
    Layout = null;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>协同办公系统OA</title>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/Source/Login/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/Source/Login/css/body.css" />
    <style type="text/css">
        #js-btn-login {
            background: rgb(254,231,154);
            background: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
            background: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
            background: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
            background: -ms-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
            background: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
            /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 ); */
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            -ms-border-radius: 30px;
            -o-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
            -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
            -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
            -o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
            box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
            border: 1px solid #D69E31;
            color: #85592e;
            cursor: pointer;
            float: left;
            font: bold 15px Helvetica, Arial, sans-serif;
            height: 35px;
            margin: 20px 0 35px 15px;
            position: relative;
            text-shadow: 0 1px 0 rgba(255,255,255,0.5);
            width: 120px;
            margin-left: 23%;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $("#username").focus();
            Judge();
            $("#js-btn-login").click(function () {
                var phone = $("#username").val().trim();
                var pwd = $("#password").val().trim();

                $.ajax({
                    url: "/Login/Login2",
                    type: "post",
                    data: JSON.stringify({ "Account": phone, "PassWord": pwd }),
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (returnData) {
                        if (returnData.Success) {
                            $("#js-btn-login").val("登录成功,页面正在跳转中...");
                            setInterval(function () {
                                window.location.href = "/Main/Index";
                            }, 1000);
                        } else {
                            alert(returnData.Message);
                        }
                    }, error: function () {
                        alert("网络错误！");
                    }
                })


            });

            //获取验证码
            $("#btnGetCode").click(function () {
                $.ajax({
                    url: "/Login/GetCode",
                    type: "post",
                    data: { "Phone": $("#username").val().trim() },
                    success: function (returnData) {
                        console.log(returnData)
                        alert(returnData.Message)
                    }, error: function () {

                    }
                });
            });
        });


        function Judge() {
            $("#username").blur(function () {
                var phone = $("#username").val().trim();
                if (phone == "") {
                    $("#lalPhone").text("请输入手机号!").css({ "color": "red", "font-size": "10px" });

                } else {
                    var reg = new RegExp(/^1[3|4|5|6|7|8][0-9]\d{4,8}$/);
                    if (!reg.test(phone)) {
                        $("#lalPhone").text("输入手机号格式错误!").css({ "color": "red", "font-size": "10px" });

                    } else {
                        $("#lalPhone").text("");
                    }
                }

            });


            $("#password").blur(function () {
                var pwd = $("#password").val().trim();
                if (pwd == "") {
                    $("#lalPwd").text("请输入密码!").css({ "color": "red", "font-size": "10px" });

                } else {
                    $("#lalPwd").text("");
                }
            });
            //var phone = $("#username").val().trim();
            //var pwd = $("#password").val().trim();
            //if (phone == "") {
            //    alert("请输入手机号！");
            //    return;
            //}
            //var reg = new RegExp(/^1[3|4|5|6|7|8][0-9]\d{4,8}$/);
            //if (!reg.test(phone)) {
            //    alert("输入手机号格式错误！");
            //    return;
            //}
            //if (pwd == "") {
            //    alert("请输入密码");
            //    return;
            //}
        }
    </script>
</head>
<body>
    <div class="container">
        <section id="content">
		<form action="/Main/Index">
			<h1>OA办公系统</h1>
			<div>
				<input type="text" placeholder="手机号" required="" id="username" /><br />
                <label id="lalPhone"></label>
			</div>
			<div>
				<input type="password" placeholder="密码" required="" id="password" /><br />
                 <label id="lalPwd"></label>
			</div>

            <div>
				<input type="text" placeholder="验证码" required="" id="txtCode" style="width:150px; margin-left:-140px;" />
                 <label></label>
			</div>
            <div>
				<input type="button" value="获取" style="width:100px; margin-top:-58px;margin-right:-200px;height:48px; border-radius:10%" class="btn btn-primary" id="btnGetCode" /><br />
                 <label></label>
			</div>
			 <div class="">
				<span class="help-block u-errormessage" id="js-server-helpinfo">&nbsp;</span>			

			 </div> 
			<div>
			 
				<input type="button" value="登录" style="width:200px;" class="btn btn-primary" id="js-btn-login"/>
			 
			</div>
		</form> 
		 
	</section>
    </div>
    <!-- container -->


    <br />
    <br />
    <br />
    <br />
    <div style="text-align: center;">
       
    </div>
</body>
</html>
